<template>
  <div class="header">
    <!-- 标题 -->
    <div class="header-title text-white bg-black text-l text-weight-6 px-4 py-3">
      {{title}}
    </div>
    <!-- 搜索框 -->
    <mt-search
      v-model="searchText"
      cancel-text="取消"
      placeholder="搜索"
      @input="toSearchPage">
    </mt-search>
    <!-- 导航 -->
    <div>
      <ul class="d-flex jc-around text-weight-6 text-l letter-s text-gray pt-2 pb-2 bg-white">
        <li v-for="(item,index) in navbarList" :key="index" @click="navigate(item.path)"
        :class="{'nav-active': navActive(item.path)}" class="pb-2">{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: String
    },
    data() {
      return {
        //导航栏数据
        navbarList:[
          { path: '/recommend', name: '推荐' },
          { path: '/singer', name: '歌手' },
          { path: '/album', name: '专辑' },
          { path: '/radio', name: '电台' }
        ],
        //搜索框的内容
        searchText: ''
      }
    },
    methods: {
      //导航栏点击跳转函数
      navigate(path) {
        //派发事件
        this.$emit('navigate', path)
      },
      //导航高亮
      navActive(path) {
        if(path === this.$route.path) {
          return true
        }else if(path === '/recommend' && this.$route.path === '/') {
          return true
        }else{
          return false
        }
      },
      //跳转到搜索页
      toSearchPage() {
        setTimeout(()=>{
          if(this.searchText !== '' && this.searchText.indexOf(" ") == -1){
            this.$router.push('/search?q='+this.searchText)
          }else{
            this.$router.push('/search?s=1')
          }
        },100)
        //this.$router.go(0)
      }
    }
  }
</script>

<style scoped>
  .header{
    position: fixed;
    width: 100%;
    z-index: 3;
  }
  .mint-search {
    height: auto !important;
  }
  .mint-search-list {
    margin-top: 10rem;
    width: 0;
    height: 0;
  }
</style>
